import React, {Component} from "react";
import {inject, observer} from "mobx-react";
import {withRouter} from "react-router-dom";
import {Icon, SearchBar, Tools} from "weaver-mobile";
import {ListViewPage, SearchAdvanced} from "weaver-mobile-page";
import {getUrlParams} from "../../util"

const getLabel = Tools.getLabel;

@inject("myProjectPageStore")
@withRouter
@observer
export default class MyProjectPage extends Component {
    componentDidMount() {
        const {myProjectPageStore: {Init}} = this.props;
        const {search_resourceid} = getUrlParams(this.props.location.search);
        Init(search_resourceid || "");
    }

    openAdvancedForm = () => {
        const {history, myProjectPageStore: {searchAd}} = this.props;
        history.push(searchAd.path);
    };

    render() {
        const {
            history,
            myProjectPageStore: {
                listAd, searchValue, changeSearchValue, onSearch, searchAd, conditionReady
            }
        } = this.props;

        return (<div style={{height: "100%"}}>
                <SearchBar
                    className="search-select"
                    placeholder="Search"
                    value={searchValue}
                    onChange={(val) => changeSearchValue(val)}
                    onSubmit={() => onSearch()}
                    onClear={() => {
                        changeSearchValue();
                        onSearch();
                    }}
                    showExtraButton
                    extraButton={[
                        {
                            key: "advanced",
                            show: <Icon key="filter-o-hot" type="filter-o-hot"
                                        className={conditionReady ? "advanced-ready" : ""}/>
                        },
                    ]}
                    onExtraButtonClick={(key) => this.openAdvancedForm()}
                />
                <SearchAdvanced
                    store={searchAd}
                    onSubmit={() => onSearch(false)}
                />

                <div>
                    <ListViewPage.Normal
                        rowKey="id"
                        store={listAd}
                        getTemplate={this.getTemplate}
                        withSwipeAction={false}
                        onRowClick={(item) => {
                            history.push(`/ProjectDetails/0/${item.id}`)
                        }}
                    />
                </div>
            </div>
        );
    }

    getTemplate = () => {
        return {
            default: [{
                key: "col_1",
                render: (data) => {
                    const {namespan, begindatespan, enddatespan, statusname, statusnamespan, procode, prjtypespan} = data;
                    return (
                        <div className="template-list-wrapper">
                            <div className="t-p-head">
                                <h4 className="t-p-title">{namespan}</h4>
                                <div className={`t-p-state t-p-state-${statusname}`}>{statusnamespan}</div>
                            </div>
                            <div className="t-p-content">
                                <div className="t-p-item">
                                    <span className="t-p-text">{getLabel("17852", "项目编码") + "："}{procode}</span>
                                </div>
                                <div className="t-p-item">
                                    <span className="t-p-text">{getLabel("586", "项目类型") + "："}{prjtypespan}</span>
                                </div>
                                <div className="t-p-item">
                                    <span
                                        className="t-p-text">{getLabel("500805", "计划开始") + "/" + getLabel("24980", "结束日期") + "："}{begindatespan}
                                        {begindatespan && enddatespan ? <span>/</span> : ""}
                                        {enddatespan}</span>
                                </div>
                            </div>
                        </div>

                    );
                },
            }],
        };
    }
}
